<template>
  <div class="courses">
    <v-list class="class_list">
        <v-data-table
          :headers="head"
          :items="items"
          :items-per-page="10"
          class="elevation-1"
          @click:row="toContain"
        ></v-data-table>
    </v-list>
  </div>
</template>
<script>
export default {
  data: () => ({
    head:[
      { text:'id',
        align:'start',
        sortable:false,
        value:'id',
      },
      { text: 'title', value: 'title' },
      { text:'teacher', value:'teacher'},
      { text: 'credits', value: 'credit' },
      { text: 'hours', value: 'hours' }
    ],
    items: [
      {
        name: "computer",
        teacher: "Lu Xun",
      },
      {
        name: "Information System",
        teacher: "Mao Zedong",
      },
      {
        name: "IT",
        teacher: "Hu shi",
      },
      {
        name: "AA",
        teacher: "A",
      },
      {
        name: "bb",
        teacher: "b",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
      {
        name: "CC",
        teacher: "C",
      },
    ],
  }),
  methods: {
    toContain(event,{item}) {
      console.log(item),
      this.$router.push({
        path: "/main/contain",
      });
    },
  },
};
</script>
<style scoped>
.courses {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.class_list{
background-color: #F5F5F5;
width: 100%;
padding-top: 8vh;
padding-left: 2vw;
padding-right: 2vw;
}
.classes{
  border: 1px solid #E0E0E0;
  padding-left: 2vw ;
  margin-right: 15vw;
}
</style>
